<script>

import {
  addStudent,
  cancellationStudent, cancelStudent,
  getStudent,
  getTeacher,
  getTeacherRest,
  servereducible
} from "@/api/tool/scheduling/Schedules";
import moment from "moment";


export default {

  name: "index",
  data() {
    return {

      text: '',
      dialogVisibleReason: false,
      dialogVisibleLeft: false,
      top0: '',
      left0: '',
      valueMethod: '线下咨询',
      valueSubject: '个人预约',
      valueStudent: '',
      dialogVisible: false,
      checkFlagRest: false,
      serveBtn: false,
      checkFlag: false,
      timeList: [],
      flagState: false,
      flag: false,
      options: [],
      value: '张老师',
      valueDate: new Date(),
      dateTable: [],
      newDateTable: [],
      reducible: [],
      newReducible: [[], []],
      query: {
        date: '',
        teacherId: '1639442734806773762'
      },
      ids: '',
      newData: [],
      studentList: [],
      // 个人，团体预约
      optionsSubject: [
        {
          value: '0',
          label: '个人预约'
        }, {
          value: '1',
          label: '团体预约'
        },
      ],
      // 咨询方式
      optionsMethods: [
        {
          value: '线下咨询',
          label: '线下咨询',
        },
        {
          value: '网络咨询',
          label: '网络咨询',
          disabled: true
        },
        {
          value: '电话咨询',
          label: '电话咨询',
          disabled: true
        },
      ],
      stuId: '',
      peopleType: "",
      timeListData: '',
      status: '',
      studentMessageName: '',
      studentEducation: "",
      studentCode: '',
      studentMethods: '',
      studentId: '',
      valueDate0: '',
      dateNow: '',
      determineFlag: true,
      timeStringA: '',
      timeStringB: '',
      timeArrA: [],
      timeArrB: [],
      startTimeNum: 0,
      nowTimeNum: 0,


    }

  },

  methods: {

    //选择咨询师
    change(id) {
      // console.log(id)
      this.query.teacherId = id
      this.getTimeList()
    },

    //时间列表,页面渲染
    getTimeList() {
      getTeacherRest(this.query).then(res => {
        // console.log(res)
        this.timeList = res.rows
        this.timeListData = res.data
        res.data.forEach(item => {
          this.newDateTable.push(item.date)
        })

      })
    },

    //status判断该时间段盒子样式
    getClass(item) {

      if (item.status === '0') {
        return 'timeCardGreen'

      } else if (item.status === '1') {
        return 'timeCardRed'

      } else {
        return 'timeCardYellow'

      }

    },

    // 左击日历某一天,获取当天时间段
    select(date) {
      this.query.date = date
      getTeacherRest(this.query).then(res => {
        // console.log(res)
        // 当日时间段
        this.timeList = res.rows
        // 一周7天
        this.newData = res.data
        res.data.forEach(item => {
          this.newDateTable.push(item.date)
        })

      })

    },

    // 鼠标右击状态变更--可约，休息
    clickRight(val, index, status) {
      //    0：可约   1：已约    2：休息
      this.status = status
      if (this.status === '1') {
        this.flagState = false
      } else {
        this.flagState = true
      }

      event.preventDefault()
      // console.log(val)
      this.ids = val

      // 右击盒子定位状态变更盒子位置
      if (index === 0) {
        this.top0 = 300 + 'px'
        this.left0 = 900 + 'px'
      } else if (index === 1) {
        this.top0 = 300 + 'px'
        this.left0 = 900 + 'px'
      } else if (index === 2) {
        this.top0 = 300 + 'px'
        this.left0 = 900 + 'px'
      } else {
        this.top0 = 300 + 'px'
        this.left0 = 900 + 'px'
      }
    },
    // 页面主体区域-状态更改盒子隐藏
    clickRightNone() {
      this.flagState = false
    },

    //鼠标左击事件----已约（学生信息）
    clickLeft(id, status) {
      // 时间段id
      // console.log(id)
      if (status === '1') {
        this.text = ''
        this.dialogVisibleLeft = true
        cancellationStudent(id).then(res => {
          // console.log(res)
          this.studentId = res.data.id
          this.studentMessageName = res.data.psyStudent.name
          this.studentEducation = res.data.psyStudent.education
          this.studentCode = res.data.psyStudent.stuNum
          this.studentMethods = res.data.mode

        })
      }

    },

    //获取可约不可约class  左侧

    updateClass(data) {

      this.timeListData.forEach(item => {

        if (item.date === data.day) {
          data.status = item.status
        }

      })

      if (data.status) {

        return 'update'

      } else {

        return 'update0'

      }

    },


    //可约按钮
    reducibleBtn() {
      //    0：可约   1：已约    2：休息
      // console.log(this.ids)
      this.checkFlag = false
      this.ids = ''
      this.status = '0'
      // console.log(this.timeList)
      this.dateNow = moment(new Date()).format('hh:mm');
      // console.log(this.dateNow)
      this.timeList.forEach(item => {

        // this.checkFlagRest = true

        if (item.status === '2') {
          this.serveBtn = true
        }

        if (item.startTime > this.dateNow) {
          this.checkFlagRest = true
          // this.determineFlag = true
        } else {
          this.checkFlagRest = false
          // this.determineFlag = false
        }
      })

    },
    //勾选单选框改变可约休息状态
    // @change 事件获取当前时间段id
    changeCheck(val) {
      // console.log(val)
      // console.log(this.ids)
      // 已勾选id拼接
      this.ids += `${val},`
      // console.log(this.ids)

    },
    //点击可约,休息按钮勾选单选框后-保存按钮-
    serveBut() {
      this.serveBtn = false
      this.checkFlagRest = false
      this.checkFlag = false
      servereducible({
        ids: this.ids,
        status: this.status
      }).then(res => {
        // console.log(res)
        this.$message.success('保存成功')
        this.getTimeList()
      })

    },

    //取消按钮
    cancellation() {
      this.serveBtn = false
      this.checkFlag = false
      this.checkFlagRest = false
    },

    //休息按钮
    restBtn() {
      //    0：可约   1：已约    2：休息
      this.checkFlagRest = false
      this.serveBtn = true
      this.checkFlag = true
      this.ids = ''
      this.status = '2'

    },

    //状态变更
    //    0：可约   1：已约    2：休息
    changeStatus() {

      if (this.status === '2') {
        this.status = '0'
        servereducible({
          ids: this.ids,
          status: this.status
        }).then(res => {
          // console.log(res)
          this.$message.success('修改成功')
          this.getTimeList()
        })

      } else {
        this.status = '2'
        // console.log(this.status)
        servereducible({
          ids: this.ids,
          status: this.status
        }).then(res => {
          // console.log(res)
          this.$message.success('修改成功')
          this.getTimeList()
        })

      }

    },

    //1\预约学生

    reservationStudent() {
      this.dialogVisible = true
      // 学生id
      this.valueStudent = ''
    },
    //2\选择学生
    selectStu(val) {
      this.stuId = val
      // console.log(val)
    },

    //3\确认添加预约
    addAppoint() {
      this.dialogVisible = false
      if (this.valueSubject === '团体预约') {
        this.peopleType = 1
      } else {
        this.peopleType = 0
      }

      addStudent({
        mode: this.valueMethod,
        peopleType: this.peopleType,
        schedulingId: this.ids,
        studentId: this.stuId

      }).then(res => {

        this.$message.success('添加成功')
        // console.log(res)
        this.getTimeList()

      })

    },


    // 已约学生取消预约
    candle() {
      this.dialogVisibleReason = true
    },

    //取消预约理由
    okBtn() {
      if (this.text === '') {
        this.$message.warning('请填写预约取消理由不能为空')
      } else {
        this.$confirm('此操作将取消预约, 请确认是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          cancelStudent({id: this.studentId, reason: this.text}).then(res => {
            // console.log(res)
            this.getTimeList()
            this.$message.success('取消预约成功')
            this.dialogVisibleReason = false
            this.dialogVisibleLeft = false
          })

        })

      }

    },

    // 上一天按钮

    lastDay() {

      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() - 1))

      this.query.date = moment(this.valueDate).format('YYYY-MM-DD')

      this.getTimeList()

    },

    //下一天按钮

    nextDay() {

      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() + 1))

      this.query.date = moment(this.valueDate).format('YYYY-MM-DD')

      // console.log(this.valueDate0)

      this.getTimeList()

    }

  },


  created() {
    //获取咨询师列表
    getTeacher().then(res => {
      // console.log(res)
      this.options = res.rows
    })
    // 当天时间过滤,页面渲染
    this.query.date = moment(new Date()).format('YYYY-MM-DD')
    // console.log(this.query.date)
    this.getTimeList()

    // 获取学生列表
    getStudent({teacherId: this.query.teacherId}).then(res => {
      // console.log(res)
      this.studentList = res.data
      this.studentList.forEach(item => {
        item.name = `${item.name}(${item.stuNum})`
      })

    })

    //默认选中
    this.valueMethod = this.optionsMethods[0].value
    this.valueSubject = this.optionsSubject[0].value

  },

}

</script>


<template>

  <div class="container" @click="clickRightNone">
    <div class="seek" v-has-permi="['aaaaa']">
      <span>当前咨询师：</span>
      <el-select v-model="value" clearable @change=change(value)>

        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="main">
      <el-calendar v-model="valueDate" class="date">
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          {{ data.day.split('-').slice(2).join('-') }}
          <div :class="updateClass(data)" v-if="newDateTable.includes(data.day)" @click="select(data.day)"></div>

        </template>
      </el-calendar>
      <div class="right">
        <div class="rightHead">
          <div class="detail">

            <span>详细情况</span>

            <el-popover
              placement="top-start"
              width="300"
              trigger="hover"
              content="时间段右击可进行快捷选项操作(时间段未开始并且未预约)">
              <el-button slot="reference" icon="el-icon-question" class="iconBtn"></el-button>
            </el-popover>

          </div>

          <div class="nextDay">
            <el-button size="mini" class="deault" @click="lastDay(1)">上一天</el-button>
            <el-button size="mini" style="margin-left: -2px" @click="nextDay">下一天</el-button>
          </div>

        </div>

        <div class="rightMain">

          <div class="mainHead">
            <el-button class="niceBtn" @click="reducibleBtn">可约</el-button>
            <el-button class="niceBtn" @click="restBtn">休息</el-button>
          </div>

          <div class="center">
            <!--可约，休息，已约盒子-->
            <div :class="getClass(item)" ref="card" @click.right="clickRight(item.id,index,item.status)"

                 v-for="(item,index) in timeList" :key="item.id" @click.left="clickLeft(item.id,item.status)">
              <div class="oftenNone" v-if="item.status==='2'">
                休息
                <div class="checkBoxYellow" v-if="checkFlagRest">
                  <el-checkbox @change="changeCheck(item.id)"></el-checkbox>
                </div>
              </div>

              <div class="oftened" v-else-if="item.status==='1'">已约</div>


              <div class="often" v-else>
                可约
                <div class="checkBoxGreen" v-if="checkFlag">
                  <el-checkbox @change="changeCheck(item.id)"></el-checkbox>
                </div>
              </div>

              <span>{{ item.startTime }} - {{ item.endTime }}</span>

            </div>


            <!--              添加预约弹框        -->
            <div>
              <el-dialog
                title="添加预约"
                :visible.sync="dialogVisible"
                width="15%"
              >
                <div class="selectStudent">
                  <span class="selectText">选择学生：</span>
                  <el-select v-model="valueStudent" placeholder="请选择" class="Int" @change="selectStu(valueStudent)">
                    <el-option
                      v-for="item in studentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <!--    个人预约，团体预约      -->
                  <span class="selectText">咨询类型：</span>
                  <el-select v-model="valueSubject" placeholder="请选择" class="Int">
                    <el-option
                      v-for="item in optionsSubject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>

                  </el-select>

                  <span class="selectText">咨询方式：</span>
                  <el-select v-model="valueMethod" placeholder="请选择" class="Int">
                    <el-option
                      v-for="item in optionsMethods"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    >
                    </el-option>
                  </el-select>

                </div>

                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="addAppoint" style="text-align: center">确 定</el-button>
                </span>

              </el-dialog>
            </div>
            <!--               状态变更           -->
            <div class="changeMenu" v-if="flagState" :style="{top:top0,left:left0}">
              <div class="changeState" @click="changeStatus">状态变更</div>
              <div class="changeState" @click="reservationStudent">预约学生</div>
            </div>

          </div>

        </div>

        <div class="rightFoot" v-if="serveBtn">
          <el-button style="width: 70px;height: 35px" @click="cancellation">取消</el-button>
          <el-button type="primary" @click="serveBut">保存</el-button>
        </div>

      </div>

      <!--      已约学生信息    -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleLeft"
        width="48%"
      >
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              姓名
            </template>
            {{ studentMessageName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              学历
            </template>
            {{ studentEducation }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              年龄
            </template>
            22
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              班级
            </template>
            该学生已注销
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              学号
            </template>
            {{ studentCode }}
          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              咨询方式

            </template>

            {{ studentMethods }}

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              问题描述

            </template>

          </el-descriptions-item>

        </el-descriptions>

        <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="candle">取消预约</el-button>

  </span>

      </el-dialog>

      <!--      取消预约理由-->

      <el-dialog

        title="取消预约"
        :visible.sync="dialogVisibleReason"

        width="37%"

      >

        <el-input
          type="textarea"
          resize="none"
          placeholder="请输入取消原因"
          v-model="text"
          maxlength="500"
          show-word-limit
        >
        </el-input>


        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleReason = false">取 消</el-button>
          <el-button type="primary" @click="okBtn">确 定</el-button>
        </span>

      </el-dialog>

    </div>

  </div>


</template>


<style scoped lang="scss">

.container {

  padding: 35px 20px;

  width: 100%;

}


.seek {


}


.selectText {

  font-size: 14px;

  display: block;

  margin-bottom: 14px;

  text-align: left;

  line-height: normal;

}


.main {

  display: flex;

  justify-content: space-between;

  gap: 40px;

  overflow-x: auto;

}


.changeMenu {

  padding: 20px 0;
  z-index: 999;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  font-size: 14px;
  position: absolute;
  top: 300px;
  left: 840px;


  .changeState {

    padding: 5px 15px;

    text-align: center;

    box-sizing: border-box;

    line-height: normal;

  }

}


.date {

  width: 50%;

}


.right {

  width: 50%;

}


.rightHead {

  display: flex;

  justify-content: space-between;

  padding: 8px 20px;

  border-bottom: 1px solid #dfe6ec;

}


.iconBtn {

  border: none;

  width: 10px;

}


::v-deep {

  .el-textarea__inner {

    height: 200px;

  }

  .el-dialog {

    border-radius: 10px;

  }


  .el-dialog__body {

    padding: 30px 20px 0 20px;

  }


  .el-dialog__footer {

    text-align: center;

    line-height: 0;

  }


  .el-button-group > .el-button:nth-child(2) {

    display: none;

  }


  .el-dialog__header {

    background: #406ef2;

    border-radius: 10px 10px 0 0;

    line-height: normal;

    text-align: left;

    color: #fff;

  }


  .el-dialog__title {

    line-height: 24px;

    font-size: 18px;

    color: #fff;

  }


  .el-dialog__header .el-dialog__close {

    color: #fff;

  }


  .Int {

    line-height: normal;

    height: 40px;

  }

}


.rightMain {

  padding: 12px 20px;

}


.niceBtn {

  width: 100px;

  height: 30px;

  line-height: 30px;

  padding: 0;

}


.center {

  padding: 20px 0;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.timeCardYellow {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(219, 162, 0, .23);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.timeCardRed {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(255, 27, 27, .1);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.timeCardGreen {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(146, 255, 122, .2);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.often {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #13ce66;

  border-color: #13ce66;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.oftened {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ff4949;

  border-color: #ff4949;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.oftenNone {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ffba00;

  border-color: #ffba00;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.timeCardYellow {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(219, 162, 0, .23);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.often0 {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ffba00;

  border-color: #ffba00;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.update {

  padding-top: 15px;

  text-align: center;

  color: #23a500;

}


.update::after {

  content: '可约';

}


.update0 {

  padding-top: 15px;

  text-align: center;

  color: #ff1b1b;

}


.update0::after {

  content: '不可约';

}


.checkBoxYellow {

  height: 14px;

  width: 14px;

  position: absolute;

  left: -92px;

  top: 0;

  border: none;

}


.checkBoxGreen {

  height: 14px;

  width: 14px;

  position: absolute;

  left: -92px;

  top: 0;

  border: none;

}


.rightFoot {

  text-align: right;

}


.selectStudent {

  line-height: normal;

}

</style>

